<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Show All Coupons</title>
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">


    <style>
        /* 基本表格样式保留 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .search-box {
            margin-bottom: 10px;
        }
        .edit-btn, .delete-btn {
            padding: 5px 10px;
            margin-right: 5px;
            cursor: pointer;
            border-radius: 3px;
        }













        /* 遮罩层样式 */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            z-index: 1000; /* 确保遮罩层在最顶层 */
        }

        /* 编辑框样式 */
        .popup{
            display: none;
            position: fixed;
            background-color: white;
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1001; /* 比遮罩层更高，确保在上层显示 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .popup1{
            display: none;
            position: fixed;
            background-color: white;
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1001; /* 比遮罩层更高，确保在上层显示 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* 关闭按钮样式 */
        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }




        body{
            background-image: url('static/img/backgroundImg.jpg');
            background-size: cover; /* 可选：使背景图像覆盖整个背景 */
            background-repeat: repeat; /* 可选：禁止背景图像重复 */
            background-position: center; /* 可选：将背景图像居中 */
        }




    </style>


    <style>
        /* Basic styling for message box */
        #message-box {
            position: fixed;
            top: 75%; /* Adjust as needed */
            right: 50px; /* Distance from right edge */
            height:300px;
            transform: translateY(-50%);
            background-color: #f0f0f0; /* Background color */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000; /* Ensure it's above other content */
        }
        #message-box input[type="text"] {
            width: 150px; /* Adjust width as needed */
            padding: 5px;
            margin-right: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        #message-box button {
            padding: 5px 10px;
            margin-right: 5px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            background-color: #007bff; /* Button background color */
            color: #fff; /* Button text color */
        }
        #message-box button:hover {
            background-color: #0056b3; /* Darker background on hover */
        }
        #message {
            margin-top: 10px;
            /* Adjust height, overflow, etc. as per your design */
        }
    </style>



    <style>
        /* 样式调整为悬浮窗口 */
        .chat-widget {
            position: fixed;
            top: 20px;
            right: 25px;
            width: 300px;
            height: 400px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            font-family: Arial, sans-serif;
        }

        .chat-header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .chat-body {
            height: 300px;
            overflow-y: scroll;
            padding: 10px;
        }

        .input-box {
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            border-top: 1px solid #ccc;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .input-box input[type="text"] {
            width: 70%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        .input-box button {
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
    </style>




    <style>
        .adcontainer {
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 200px; /* Set width of container */
            height: 200px; /* Set height of container */
            background-image:  url('static/img/advertisment.png'); /* Background image URL */
            background-size: cover; /* Scale the background image to cover the entire container */
            border: 1px solid #ccc; /* Optional: Add border */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
        }

        .adcontainer a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none; /* Remove underline */
            color: transparent; /* Make text transparent */
        }
    </style>






    <style>

        .Pagecontainer {
            text-align: center; /* 居中显示内容 */
        }
        .pagination {
            margin-top: 20px;
            display: inline-block; /* 让分页控件成为行内块元素，便于居中 */
        }
        .pagination .page-item .page-link {
            color: #1e88e5;
        }
        .pagination .page-item.active .page-link {
            background-color: #1e88e5;
            border-color: #1e88e5;
        }
        .pagination .page-link:hover {
            background-color: #f2f2f2;
        }



    </style>






    <style>
        /* 基本的导航栏样式 */
        .navbar {
            background-color: #343a40; /* 深灰色背景 */
            overflow: hidden;
        }

        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2; /* 白色文字 */
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .navbar a:hover {
            background-color: #ddd; /* 灰色悬停背景 */
            color: black;
        }

        .navbar a.active {
            background-color: #4CAF50; /* 绿色激活背景 */
            color: white;
        }
    </style>






</head>



<body>



<div class="adcontainer">
    <a href="https://www.taobao.com/" target="_blank" rel="noopener noreferrer"></a>
    <!-- Optional: You can use a div with background image instead of an <img> tag -->
</div>



<div class="chat-widget" id="chatWidget">
    <div class="chat-header">
        联系客服:1133*******
    </div>
    <div class="chat-body" id="chatBox"></div>
    <div class="input-box">
        <input type="text" id="messageInput" placeholder="Type your message...">
        <button onclick="sendMessage()">Send</button>
    </div>
</div>


<div id="message-box">
    <h3>消息反馈</h3>
    <input id="text" type="text" />
    <button onclick="send()">发送消息</button>
    <button onclick="closeWebSocket()">关闭连接</button>
    <div id="message">
    </div>
</div>


<div class="container">
    <h2 class="mt-4 mb-4">领取淘宝团购优惠券</h2>

    <div class="input-group mb-4">

        <input type="text" id="searchInput" class="form-control search-box" placeholder="Search..." value="(根据CouponID搜索)">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary search-btn" type="button" id="searchButton">搜索</button>
            <button class="btn btn-outline-secondary add-btn" type="button" id="addButton">新增</button>
            <button class="btn btn-outline-secondary refresh-btn" type="button" id="refreshButton">刷新</button>
        </div>
    </div>




<br/>
    <div class="overlay" id="overlay"></div>

    <div class="popup"    id="popup">
        <span class="close"  onclick="closePopup()">&times;</span>
        <h2>编辑 Mycoupon</h2>
        <form id="editForm" th:action="@{/edit}"     method="POST"  >
            <label for="editCouponId">优惠券编号:</label><br>
            <input type="text" id="editCouponId" name="mycouponId" readonly  required><br><br>
            <label for="editCouponNumber">优惠券数量:</label><br>
            <input type="text" id="editCouponNumber" name="mycouponNumber" required><br><br>
            <label for="editCustomerId">顾客ID:</label><br>
            <input type="text" id="editCustomerId" name="customerId" readonly  required><br><br>
            <label for="editCustomerName">顾客姓名:</label><br>
            <input type="text" id="editCustomerName" name="customerName" readonly required><br><br>
            <label for="editCouponName">优惠券名称:</label><br>
            <input type="text" id="editCouponName" name="mycouponName" required><br><br>
            <label for="editCouponPrice">优惠券价格:</label><br>
            <input type="text" id="editCouponPrice" name="mycouponPrice" required><br><br>
            <label for="editCouponStatus">优惠卷状态:</label><br>
            <input type="text" id="editCouponStatus" name="mycouponStatus" value="(请输入0,1,2)"  required><br><br>
            <button class="saveEditBtn ">提交</button>
        </form>
    </div>

    <div class="popup1"  id="popup1">
        <span class="close"  onclick="closePopup1()">&times;</span>
        <h2>新增 Mycoupon</h2>
        <form id="addForm" th:action="@{/add}"     method="POST"  >
            <label for="editCouponId">优惠券编号:(自增字段:无需添加)</label><br>
            <input type="text" id="editCouponId" name="mycouponId"readonly  required><br><br>
            <label for="editCouponNumber">优惠券数量:</label><br>
            <input type="text" id="editCouponNumber" name="mycouponNumber" required><br><br>
            <label for="editCustomerId">顾客ID:</label><br>
            <input type="text" id="editCustomerId" name="customerId"  required><br><br>
            <label for="editCustomerName">顾客姓名:</label><br>
            <input type="text" id="editCustomerName" name="customerName" required><br><br>
            <label for="editCouponName">优惠券名称:</label><br>
            <input type="text" id="editCouponName" name="mycouponName" required><br><br>
            <label for="editCouponPrice">优惠券价格:</label><br>
            <input type="text" id="editCouponPrice" name="mycouponPrice" required><br><br>
            <label for="editCouponStatus">优惠卷状态:</label><br>
            <input type="text" id="editCouponStatus" name="mycouponStatus" value="(请输入0,1,2)"  required><br><br>
            <button class="saveAddBtn ">提交</button>
        </form>
    </div>
    <br/>





    <div>


    <table class="table table-striped" id="yourTableId">
        <thead class="thead-dark">
        <tr>
            <th>Coupon ID</th>
            <th>Coupon Number</th>
            <th>Customer ID</th>
            <th>Customer Name</th>
            <th>Coupon Name</th>
            <th>Coupon Price</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
        </thead>

        <tbody>



        <div class="navbar">
            <a class="active" href="#">首页</a>
            <a href="/app/mallHomePage">商城主页</a>
            <a href="/app/myCoupons">我的优惠券</a>
            <a href="/app/profileManagement">个人信息管理</a>
            <a href="/app/projectImage">项目功能介绍图</a>
            <!-- 添加更多页面链接 -->
        </div>






        <!-- 使用Thymeleaf迭代显示优惠券信息 -->
        <tr th:each="coupon : ${coupons}">
            <td th:text="${coupon.mycouponId}"></td>
            <td th:text="${coupon.mycouponNumber}"></td>
            <td th:text="${coupon.customerId}"></td>
            <td th:text="${coupon.customerName}"></td>
            <td th:text="${coupon.mycouponName}"></td>
            <td th:text="${coupon.mycouponPrice}"></td>
            <td th:text="${coupon.mycouponStatus}"></td>
            <td>
                <!-- 编辑按钮 -->
                <button class="btn btn-primary edit-btn" th:attr="data-coupon-id=${coupon.mycouponId}">编辑</button>
                <!-- 删除按钮 -->
                <button class="btn btn-danger delete-btn" th:attr="data-coupon-id=${coupon.mycouponId}">删除</button>

            </td>
        </tr>
        </tbody>
    </table>


    <!-- 分页部分 -->
        <div th:if="${totalPages > 1}">
            <ul class="pagination justify-content-center mt-4">
                <li class="page-item" th:class="${currentPage == 1} ? 'disabled' : ''">
                    <a class="page-link" th:href="@{'/showCouponsPaged?pageNum=' + (currentPage - 1) + '&pageSize=' + pageSize}">&laquo; Previous</a>
                </li>
                <li th:each="pageNo : ${#numbers.sequence(1, totalPages)}" class="page-item" th:class="${pageNo == currentPage} ? 'active' : ''">
                    <a class="page-link" th:href="@{'/showCouponsPaged?pageNum=' + pageNo + '&pageSize=' + pageSize}" th:text="${pageNo}">1</a>
                </li>
                <li class="page-item" th:class="${currentPage == totalPages} ? 'disabled' : ''">
                    <a class="page-link" th:href="@{'/showCouponsPaged?pageNum=' + (currentPage + 1) + '&pageSize=' + pageSize}">Next &raquo;</a>
                </li>
            </ul>
        </div>
</div>



</div>






<div class="Pagecontainer">
    <h2 class="mt-5 mb-4">Bootstrap Pagination Example</h2>

    <!-- 分页框 -->
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
            </li>
        </ul>
    </nav>
</div>











<script>
    const chatBox = document.getElementById('chatBox');
    const messageInput = document.getElementById('messageInput');
    let ws;

    function connectWebSocket() {
        const clientId = Math.random().toString(36).substr(2);

        if ('WebSocket' in window) {
            ws = new WebSocket("ws://localhost:8080/app/ws/" + clientId);
        } else {
            alert('WebSocket is not supported by your browser.');
        }

        ws.onopen = function() {
            writeToChatBox('Connected to WebSocket');
        };

        ws.onmessage = function(event) {
            const message = event.data;
            writeToChatBox('Server: ' + message);
        };

        ws.onclose = function() {
            writeToChatBox('WebSocket connection closed');
        };

        ws.onerror = function(err) {
            writeToChatBox('WebSocket error: ' + err);
        };
    }

    function writeToChatBox(message) {
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        chatBox.appendChild(messageElement);
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    function sendMessage() {
        const message = messageInput.value.trim();
        if (message !== '') {
            writeToChatBox('You: ' + message);
            ws.send(message);
            messageInput.value = '';
        }
    }

    connectWebSocket();
</script>



<script type="text/javascript">
    var websocket = null;
    var clientId = Math.random().toString(36).substr(2);

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        //连接WebSocket节点
        websocket = new WebSocket("ws://localhost:8080/app/ws/"+clientId);
    }
    else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(){
        setMessageInnerHTML("连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }
</script>


<script>








    function openPopup1() {
        document.getElementById("overlay").style.display = "block";
        document.getElementById("popup1").style.display = "block";

    }

    function closePopup1() {
        document.getElementById("overlay").style.display = "none";
        document.getElementById("popup1").style.display = "none";

    }


    function openPopup() {
        document.getElementById("overlay").style.display = "block";
        document.getElementById("popup").style.display = "block";

    }

    function closePopup() {
        document.getElementById("overlay").style.display = "none";
        document.getElementById("popup").style.display = "none";

    }







</script>



<!-- JavaScript 部分保留 -->
<script th:src="@{/static/js/jquery-3.1.0.min.js}"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script th:inline="javascript">


    $(document).ready(function () {




        // 给删除按钮添加点击事件
        $('.delete-btn').click(function () {
            var couponId = $(this).data('coupon-id');

            // 发送Ajax请求删除优惠券
            $.ajax({
                type: 'DELETE',
                url: '/app/delete/' + couponId,
                success: function (response) {
                    // 如果删除成功，在前端移除对应的表格行
                    if (response === 'ok') {

                        $('tr[data-coupon-id="' + couponId + '"]').remove();
                        location.reload(); // 重新加载页面
                    } else {
                        alert('删除失败'); // 可以根据实际情况处理错误
                    }
                },
                error: function () {
                    alert('请求失败'); // 可以根据实际情况处理错误
                }
            });
        });









        // 编辑模态框的显示和逻辑处理
        function showEditModal(couponData, callback) {
            // 将传入的couponData填充到编辑表单中
            $('#editCouponId').val(couponData.mycouponId);
            $('#editCouponNumber').val(couponData.mycouponNumber);
            $('#editCustomerId').val(couponData.customerId);
            $('#editCustomerName').val(couponData.customerName);
            $('#editCouponName').val(couponData.mycouponName);
            $('#editCouponPrice').val(couponData.mycouponPrice);
            $('#editCouponStatus').val(couponData.mycouponStatus);
            openPopup();
            // 点击保存按钮后的处理
            $('.saveEditBtn').click(function () {
                // 收集编辑后的数据
                var updatedCouponData = {
                    mycouponId: couponData.mycouponId, // 保持原始ID不变
                    mycouponNumber: $('#editCouponNumber').val(),
                    customerId: $('#editCustomerId').val(),
                    customerName: $('#editCustomerName').val(),
                    mycouponName: $('#editCouponName').val(),
                    mycouponPrice: $('#editCouponPrice').val(),
                    mycouponStatus: $('#editCouponStatus').val()
                };
                // 执行回调函数，将更新后的数据传递给Ajax请求
                callback(updatedCouponData);
                // 关闭模态框
                closePopup();
            });
        }
        // 给编辑按钮添加点击事件
        $('.edit-btn').click(function () {
            var couponId = $(this).data('coupon-id');
            var $row = $(this).closest('tr'); // 获取当前行
            // 收集当前行的所有属性值
            var couponData = {
                mycouponId: couponId,
                mycouponNumber: $row.find('td:eq(1)').text(),
                customerId: $row.find('td:eq(2)').text(),
                customerName: $row.find('td:eq(3)').text(),
                mycouponName: $row.find('td:eq(4)').text(),
                mycouponPrice: $row.find('td:eq(5)').text(),
                mycouponStatus: $row.find('td:eq(6)').text()
            };
            console.log(couponData);
            showEditModal(couponData, function(updatedCouponData) {
                // 用户完成编辑后，发送Ajax请求更新数据
                $.ajax({
                    type: 'POST', // 注意这里应该是POST请求，因为你需要发送整个优惠券的数据
                    contentType: 'application/json', // 发送JSON格式数据
                    data: JSON.stringify(updatedCouponData), // 将JavaScript对象转换为JSON字符串
                    url: '/app/edit',
                    success: function (response) {
                        if (response === 'ok') {
                            location.reload(); // 重新加载页面
                            // 如果更新成功，更新表格中的数据
                            $row.find('td:eq(1)').text(updatedCouponData.mycouponNumber);
                            $row.find('td:eq(2)').text(updatedCouponData.customerId);
                            $row.find('td:eq(3)').text(updatedCouponData.customerName);
                            $row.find('td:eq(4)').text(updatedCouponData.mycouponName);
                            $row.find('td:eq(5)').text(updatedCouponData.mycouponPrice);
                            $row.find('td:eq(6)').text(updatedCouponData.mycouponStatus);
                        } else {
                            alert('更新失败'); // 可以根据实际情况处理错误
                        }
                    },
                    error: function () {
                        alert('请求失败'); // 可以根据实际情况处理错误
                    },
                    complete: function() {
                        // 请求完成后，无论成功或失败，将标志变量设置为 false，允许新的请求再次发送
                    }
                }
                );

            });
        });














        // 新增模态框的显示和逻辑处理
        function showAddModal(couponData, callback) {
            // 将传入的couponData填充到编辑表单中
            $('#editCouponId').val(couponData.mycouponId);
            $('#editCouponNumber').val(couponData.mycouponNumber);
            $('#editCustomerId').val(couponData.customerId);
            $('#editCustomerName').val(couponData.customerName);
            $('#editCouponName').val(couponData.mycouponName);
            $('#editCouponPrice').val(couponData.mycouponPrice);
            $('#editCouponStatus').val(couponData.mycouponStatus);
            openPopup1();
            // 点击保存按钮后的处理
            $('.saveAddBtn').click(function () {
                // 收集编辑后的数据
                var updatedCouponData = {
                    mycouponId: couponData.mycouponId, // 保持原始ID不变
                    mycouponNumber: $('#editCouponNumber').val(),
                    customerId: $('#editCustomerId').val(),
                    customerName: $('#editCustomerName').val(),
                    mycouponName: $('#editCouponName').val(),
                    mycouponPrice: $('#editCouponPrice').val(),
                    mycouponStatus: $('#editCouponStatus').val()
                };
                // 执行回调函数，将更新后的数据传递给Ajax请求
                callback(updatedCouponData);
                // 关闭模态框
                closePopup1();
            });
        }
        // 给按钮添加点击事件
        $('.add-btn').click(function () {
            openPopup1();
            var couponId = $(this).data('coupon-id');
            var $row = $(this).closest('tr'); // 获取当前行

            // 收集当前行的所有属性值
            var couponData = {
                mycouponId: couponId,
                mycouponNumber: $row.find('td:eq(1)').text(),
                customerId: $row.find('td:eq(2)').text(),
                customerName: $row.find('td:eq(3)').text(),
                mycouponName: $row.find('td:eq(4)').text(),
                mycouponPrice: $row.find('td:eq(5)').text(),
                mycouponStatus: $row.find('td:eq(6)').text()
            };
            console.log(couponData);
            showAddModal(couponData, function(updatedCouponData) {
/*                // 用户完成编辑后，发送Ajax请求更新数据
                $.ajax({
                        type: 'POST', // 注意这里应该是POST请求，因为你需要发送整个优惠券的数据
                        contentType: 'application/json', // 发送JSON格式数据
                        data: JSON.stringify(updatedCouponData), // 将JavaScript对象转换为JSON字符串
                        url: '/app/edit',
                        success: function (response) {
                            if (response === 'ok') {

                                location.reload(); // 重新加载页面

                                // 如果更新成功，更新表格中的数据
                                $row.find('td:eq(1)').text(updatedCouponData.mycouponNumber);
                                $row.find('td:eq(2)').text(updatedCouponData.customerId);
                                $row.find('td:eq(3)').text(updatedCouponData.customerName);
                                $row.find('td:eq(4)').text(updatedCouponData.mycouponName);
                                $row.find('td:eq(5)').text(updatedCouponData.mycouponPrice);
                                $row.find('td:eq(6)').text(updatedCouponData.mycouponStatus);
                            } else {
                                alert('更新失败'); // 可以根据实际情况处理错误
                            }
                        },
                        error: function () {
                            alert('请求失败'); // 可以根据实际情况处理错误
                        },
                        complete: function() {
                            // 请求完成后，无论成功或失败，将标志变量设置为 false，允许新的请求再次发送
                        }
                    }
                );*/

            });
        });













        $('#searchButton').click(function() {
            var searchInputValue = $('#searchInput').val(); // 获取搜索框中的值

            // 构建请求的 URL，这里假设搜索参数是 searchInputValue 的值
            var url = '/app/search?q=' + encodeURIComponent(searchInputValue);

            // 发送 GET 请求
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // 成功回调函数
                    console.log(data); // 示例：在控制台输出返回的数据
                    // 这里可以根据返回的数据做进一步的操作，例如更新页面内容
                    var tableBody = $('#yourTableId tbody'); // 假设你的表格有一个 ID 叫做 yourTableId
                    tableBody.empty(); // 清空表格体，准备填充新数据

                    // 遍历数据并添加到表格中
                    data.forEach(function(coupon) {
                        var row = $('<tr></tr>');
                        row.append($('<td></td>').text(coupon.mycouponId));
                        row.append($('<td></td>').text(coupon.mycouponNumber));
                        row.append($('<td></td>').text(coupon.customerId));
                        row.append($('<td></td>').text(coupon.customerName));
                        row.append($('<td></td>').text(coupon.mycouponName));
                        row.append($('<td></td>').text(coupon.mycouponPrice));
                        row.append($('<td></td>').text(coupon.mycouponStatus));
                        // 添加编辑和删除按钮（这里需要处理 data- 属性的绑定）
                        var actionsCell = $('<td></td>');
                        actionsCell.append($('<button></button>', {
                            class: 'btn btn-primary edit-btn',
                            'data-coupon-id': coupon.mycouponId,
                            text: '编辑'
                        }));
                        actionsCell.append($('<button></button>', {
                            class: 'btn btn-danger delete-btn',
                            'data-coupon-id': coupon.mycouponId,
                            text: '删除'

                        }));
                        row.append(actionsCell);
                        tableBody.append(row);
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("搜索错误");
                    location.reload(); // 重新加载页面
                    console.error('Error:', textStatus, errorThrown);
                }
            });
        });







        // 点击刷新按钮时执行 location.reload()
        $('#refreshButton').click(function() {
            location.reload();
        });











//TODO
        //跳转页面
        //刷新容器

        // 初始化页码和数据
        var currentPage = 1; // 当前页码
        // 点击页码链接时的事件处理
        $('.pagination .page-link').on('click', function(e) {
            e.preventDefault();
            var page = $(this).text().trim(); // 获取点击的页码，并去除可能存在的空格

            if (page === '«') {
                currentPage = Math.max(1, currentPage - 1); // 上一页，确保不小于1
            } else if (page === '»') {
                currentPage++; // 下一页
            } else {
                currentPage = parseInt(page); // 具体页码
            }

            // 更新显示的数据内容
            updateData(currentPage);
        });

        // 更新数据内容的函数
        function updateData(page) {
            // 发送 AJAX 请求获取数据
            $.ajax({
                url: 'your-api-url', // 替换为你的后端 API 地址
                type: 'GET',
                dataType: 'json',
                data: {
                    page: page, // 发送当前页码作为参数
                    // 其他可能需要的参数
                },
                success: function(data) {
                    // 成功获取数据后的处理
                    // 假设你有一个数据容器，例如 <div id="data-container"></div>
                    // 将获取的数据更新到页面上
                    $('#data-container').html(''); // 清空容器
                    $.each(data, function(index, item) {
                        $('#data-container').append('<p>' + item.name + '</p>'); // 示例：假设数据中有一个名为name的字段
                    });
                },
                error: function(xhr, status, error) {
                    // 处理错误情况
                    console.error('AJAX Error: ' + status + ' - ' + error);
                }
            });
        }











    });









</script>

















</body>
</html>
